<template>
<div>
    <div class="like">
        <div v-for="i in list" :key="i.id" class="out" @click="detailShow(i)">
            <img :src="require('@/assets'+i.pic)"/>
            <div class="unit">
                <div>{{i.hotelName}}</div>
                <div>{{i.address}}</div>
                <div>距离{{i.distance}}km</div>
                <div class="star">
                    <span :class="['iconfont','icon-xingxing',j<i.star?'green':'gray']" v-for="j in Array.from(new Array(5).keys())" :key="j"></span>
                </div>
                <div class="price">￥{{i.price}}</div>
            </div>
        </div>
    </div>
    <Detail v-show="imgShow" :item="item" @changeImgShow="changeImgShow"/>
</div>
</template>
<script>
import axios from 'axios'
import Detail from './detail'
export default {
    components:{
        Detail
    },
    data(){
        return{
            list:[],
            imgShow:false,
            item:{
                pic:'/like/01.jpg'
            }
        }
    },
    beforeCreate(){
        axios.get('/roome/like').then(data=>{
          
            this.list = data.data;
            this.item = data.data[0];
        })
    },
    methods:{
        detailShow(i){
            this.imgShow = true 
            this.item =  i
        },
        changeImgShow(){
            this.imgShow = false
        }
    }
}
</script>
<style scoped>

.out{
    width: 100%;
    margin-top: 15px;
    overflow: hidden;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 5px 5px 5px #ddd;

}
img{
    width: 40%;
    height: 120px;
    float: left;
}
.unit{
    padding: 15px 10px;
    box-sizing: border-box;
    width: 60%;
    height: 120px;
    position: relative;
    float: left;
}
.price{
    position: absolute;
    right: 15px;
    bottom:15px;
}
.green{
    color:#58bfc0;
}
.gray{
    color: #ddd;
}
</style>